<template>
  <div class="user-page">
    <div class="notes-main-c" v-if="pageType === 'common'">
      <div class="user-page-btn_box">
        <el-button @click="showCharts">数据助手</el-button>
      </div>
      <ul class="notes-main-c-list" v-loading="loading">
        <li
          v-for="(item, index) of noteList"
          :key="index"
          class="notes-main-c-list-li"
          @click="noteViewDetailClick(item.id, item.type)"
        >
          <el-card class="note-card" shadow="hover">
            <div slot="header" class="note-card-header">
              <div class="note-card-header-title">
                <span>{{ item.title }}</span>
              </div>
              <div class="note-card-header-info">
                <span>{{ item.create_time }}</span>
              </div>
            </div>
            <div class="note-card-content">{{ item.content }}</div>
          </el-card>
        </li>
      </ul>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        layout="total, prev, pager, next"
        :total="total"
        :page-size="10"
      >
      </el-pagination>
      <p v-if="loading" class="data-loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </div>
    <div class="charts_box" v-if="pageType === 'charts'">
      <div class="charts_box-btn">
        <el-button icon="el-icon-back" @click="backBtnClick">返回</el-button>
      </div>
      <chart-line> </chart-line>
      <chart-bar></chart-bar>
      <chartBarComment></chartBarComment>
      <chart-bar></chart-bar>
    </div>
  </div>
</template>
<script>
import chartLine from "@/components/modules/user-page/chart-line";
import chartBar from "@/components/modules/user-page/chart-bar";
import chartBarComment from "@/components/modules/user-page/chartBarComment";
export default {
  name: "user-page",
  props: {},
  data() {
    return {
      pageType: "common",
      noteList: [],
      loading: true,
      noMore: false,
      userInfo: "",
      listQuery: {
        page: 1,
        limit: 10,
      },
      current: 1,
      total: 0,
    };
  },
  computed: {
    disabled() {
      return this.loading || this.noMore;
    },
    noteListLen() {
      return this.noteList.length;
    },
    userId() {
      if (this.$store.state.user) return this.$store.state.user.user_id;
      else return "";
    },
  },
  created() {},
  methods: {
    line() {
      this.$axios
        .get("/article/user_visual/", {
          params: {
            user_id: this.userInfo.id,
          },
        })
        .then((ret) => {
          var chartDom = document.getElementById("main");
          var myChart = echarts.init(chartDom);
          var option;

          option = {
            xAxis: {
              type: "category",
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: "line",
              },
            ],
          };

          option && myChart.setOption(option);
        })
        .catch((res) => {
          this.$message.error(res.response.data.message);
          this.loading = false;
        });
    },

    // 点击页码
    async handleCurrentChange() {
      this.listQuery.page = this.current;
      this.getNoteList();
    },
    showCharts() {
      this.pageType = "charts";
    },
    load() {
      this.loading = true;
      this.getNoteList();
    },
    getNoteList() {
      this.$axios
        .get("/article/user_article/", {
          params: {
            user_id: this.userInfo.id,
            page: this.listQuery.page,
            limit: this.listQuery.limit,
          },
        })
        .then((ret) => {
          console.log("=>>", ret);
          this.noteList = ret.data.data;
          ret.data.listQuery.page += 1;
          this.listQuery = ret.data.listQuery;
          this.loading = false;
          this.total = ret.data.total;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.response.data.message);
        });
    },
    noteViewDetailClick(id, type) {
      localStorage.setItem("noteType", type);
      this.$router.push({ path: `/note/${id}` });
    },
    backBtnClick() {
      this.pageType = "common";
    },
  },
  mounted() {
    this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
    console.log(this.userInfo);
    this.getNoteList();
  },
  components: {
    chartLine,
    chartBar,
    chartBarComment,
  },
};
</script>
<style lang="scss" scoped>
.user-page {
  padding: 0 20px 20px 20px;
  background: #eee;
  .user-page-btn_box {
    margin-bottom: 20px;
    padding: 20px 20px;
    text-align: right;
  }
  .notes-main-c-list-li {
    margin-bottom: 10px;
  }
  .note-card-header-info {
    font-size: 12px;
    color: #808080;
    .note-card-header-info-date {
      margin-left: 15px;
    }
  }
  .note-card-content {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-indent: 2em;
  }
  .charts_box {
    .charts_box-btn {
      padding: 20px 20px;
    }
  }
}
</style>
<style lang="scss">
.user-page {
  height: 100%;
  overflow-y: auto;
  .el-card.is-hover-shadow:hover,
  .el-card.is-hover-shadow:focus {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  }
}
</style>
